<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
      .line {
        text-decoration: line-through;
      }
    </style>
  </head>
  <body>
    <div id="root">
    添加:<input type="text" v-model="content" @keyup.enter="join" />
    <br>
    修改:<input type="text" v-model="newContent" @keyup.enter="assignment()">

   <div style="width:200px ;height: 300px;background-color: aqua;">
    搜索:<input type="text" v-model="ane" @change="two">
    <ul>
        <li>{{ three}}</li>
    </ul>
   </div>
      <div v-for="i in arr">
       <div :class="{'line':i.isDone===true}" > {{i.content}}</div>
        <button @click="add(i.id)">删除</button>

        <button @click="amend(i)">修改</button>

        <button @click="alter(i)">{{i.isDone?'已完成':'未完成'}}</button>
      </div>
    </div>
    <script>
      Vue.config.productionTip = false;

      new Vue({
        el: "#root",
        data() {
          return {
            arr: [
              { id: 1, content: "今天的作业还没做完", isDone: false },
              { id: 2, content: "不许吃饭", isDone: true },
            ],
            //双向绑定v-model 用来放输入的值
            content: "",
            newContent:'',
            id:'',
            ane:'',
            three:""
          };
        },
        methods: {
          //加入
          join() {
            console.log(123);
            let obj = { id: Date.now(), content: this.content, isDone: false };
            console.log(obj);
            this.arr.push(obj);
            this.content = "";
          },
          //添加样式
          alter(i) {
            console.log(i);

            //点击之后改变isDone的属性，他不等于他改变
            i.isDone = !i.isDone;
          },
          //删除
          add(id) {
            console.log(id);
            this.arr = this.arr.filter((v) => v.id != id);
          },
          //修改
          amend(i){

            console.log(i);
            this.newContent=i.content
            this.id=i.id
          },
          //修改返回
          assignment(){
           console.log( this.newContent);
           this.arr.map((v,i)=>{
            console.log(v.id);
            if(v.id==this.id){
                v.content= this.newContent
                this.newContent=''
            }
           })
          
          },
          //搜索
          two(){
            console.log(this.arr);
            this.arr.map((v)=>{
                if(this.ane==v.content){
                    this.three=v.content
                }
            })
          }
        },
      });
    </script>
  </body>
</html>
